<template>
  <el-row class="app">
    <el-col class="user-box" >
        <el-button v-show="flag" type="primary" @click="$router.go(-1)"  class="go-btn show-go-btn " icon="el-icon-arrow-left">返回</el-button>
        <el-col class="user">
            <el-row><el-col><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></el-col></el-row>              
            <el-row>
                <el-col v-if="userInfo.name !== '无' && userInfo.name.length >0">{{userInfo.name}}</el-col>
                <el-col v-else>{{userInfo.account}}</el-col>
            </el-row>
        </el-col>
    </el-col>
    <el-col class="node-box"  :xs="22" :sm="22" :md="20" :lg="20" >
      <router-view></router-view>
    </el-col>
    
  </el-row>
</template>

<script type="text/ecmascript-6">
  import { defineComponent,ref,watch,reactive } from "vue";
  import { useRouter,useRoute} from 'vue-router'
  import PubSub from 'pubsub-js'
  export default defineComponent({
      name:"Home",
      setup(){  
        
        const router = useRouter()
        const route = useRoute()

        let flag = ref(false)


        //退出登录
        function outUser(){
            router.replace('/login')
        }

        //修改密码
        function updatePwd(){
            router.push('/home/update')
        }

        
        const userInfo = reactive(JSON.parse(window.sessionStorage.getItem('info')))
        
        PubSub.subscribe('mySubScriber',(msg,data)=>{
            //订阅修改名称事件，并更新session
            userInfo.name = data
            window.sessionStorage.setItem('info',JSON.stringify(userInfo))
        })

        //监视路由变化
        watch(()=>route.path,()=>{
            const arrPath = ['/home/VoteHistory','/home/updateName','/home/updatePwd']
            arrPath.includes(route.path) ? flag.value = true : flag.value = false
        },
        {immediate: true}//   默认初始化执行一次
        )


        return {
            userInfo,
            flag,
            outUser,
            updatePwd,
            
        }
      },

  })
</script>

<style scoped lang="less" >
@back:#789eff;
@iconBack:#D4EBFD;
@color:#0B9CE9;
.app{
    .user-box{
        position: relative;
        height: 30vh;
        background: @back;

        .go-btn{
            position: absolute;
            top: 10px;
            left: 10px;
            width: 100px;
        }

        .user{
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            margin: auto;
            width: 50vw;
            height: 10vh;
            color:white;
            .el-row{
                text-align: center;
            }
        }
    }

    .node-box{
        margin: 15px auto;
        overflow: hidden;
        .node-box-item{
            padding: 10px 0px;
            // margin: 0px 10vw;
            border-bottom: 1px solid #eee;

            .icon-left{
                display: inline-block;
                text-align: center;
                border-radius: 50%;
                line-height: 30px;
                width: 30px;
                height: 30px;
                background: @iconBack;
                color: @color;
            }

            .icon-left-text{
                margin-left: 10px;
            }
            .icon-right{
                text-align: right;
                line-height: 30px;

            }
        }
    }
}

@media screen and (max-width:770px){
    .app .user-box .go-btn{
        position: absolute;
        top: 5px;
        left: 5px;
        width: 90px;
    }
}
</style>
